.squre-wrap {
  height: auto;
  width: auto;
  overflow: hidden;
  // filter: drop-shadow(0 0 30px blue);
  // box-shadow: 0 0 30px blue;

  // background-image: url('assets/image/03.jpg');
  // background-size: 100% auto;
  // background-position: center;
}
.squre {
  height: 400px;
  width: 1000px;

  transition: all 0.5s ease-out;
  margin: 40px auto;

  border-radius: 10px;
  clip-path: path(
    "M 0 0 L 200,0 C 200,0 215,0 215,10  L 230,30 C 230,30 235,40 245,40 L 230,40 L 1000,40 L 1000,400 L 800,400 L 780,360 L 0,360 z"
  );
  // "M 0 0 L 200,0 S 200,0 205,0 S 215,10 215,10 S 235,40 240,40  L 1000,40 L 1000,400 L 800,400 L 780,360 L 0,360 z"

  // box-shadow: inset 0 0 300px yellow;

  &.active {
    background-color: rgba($color: #ff0000, $alpha: 0.3);
  }

  &.close {
    background-color: blue;
  }

  // &:hover {
  //   background-color: yellow;
  // }
}

.wrap {
  overflow: hidden;
  width: 600px;
  margin: 20px auto;

  filter: drop-shadow(0px 0px 4px rgba(66, 10, 10, 1));

  $backColor: rgba(
    $color: rgb(0, 0, 248),
    $alpha: 0.3,
  );

  @function take_path($W, $H, $R) {
    $Bessel_C_1_0: calc($W + $R) + ",0";
    $Bessel_C_1_1: calc($W + $R) + ",0";
    $Bessel_C_1_2: calc($W + $R * 2) + "," + calc($R * 2);

    $P_1: "L " + #{$W} + ",0" + " ";
    $P_2: "C " + #{$Bessel_C_1_0} + " " + #{$Bessel_C_1_1} + " " + #{$Bessel_C_1_2} +
      " ";
    $P_3: "L " + calc($H / 2 + $W) + "," + calc($H - $R * 2) + " ";
    $P_4: "C " + calc($H / 2 + $W + $R) + "," + #{$H} + " " + calc(
        $H / 2 + $W + $R
      ) + "," + #{$H}+ " " + calc($H / 2 + $W + $R * 2) + "," + #{$H} + "" + " ";
    $P_5: "L " + calc($W * 2) + "," + #{calc($H + 1)} + " "; // + 1 是为了解决留缝的问题

    @return "M 0,0 " + $P_1 + $P_2 + $P_3 + $P_4 + $P_5 + " L 0," + #{calc(
        $H + 1
      )} + " z";
  }

  $clip_w: 200;
  $clip_w_px: #{$clip_w}px;
  $clip_h: 40;
  $clip_h_px: #{$clip_h}px;
  $r: 10;
  $r_px: #{$r}px;
  $clip: path(take_path($clip_w, $clip_h, calc($r + 3)));
  // $clip: path(
  //   "M 0,0 L 100,0 C 108,0 108,0 116,16 L 120,24 C 128,40 128,40 136,40 L 200,40 L 0,40 z"
  // );

  &::after {
    content: "";
    width: 12px;
    height: calc($clip_h_px - 6px);

    position: absolute;
    top: 1px;
    left: calc($clip_w_px + 30px);

    background: linear-gradient(to right, $backColor, rgba(0, 0, 0, 0));
    border-radius: 0 $r_px 0 $r_px;

    transform: skewX(27deg);
  }

  &::before {
    @extend ::after;
    left: calc($clip_w_px + 52px);
  }

  .head {
    width: 100%;
    height: $clip_h_px;
    border-radius: $r_px 0 0 0;
    background-color: $backColor;
    clip-path: $clip;
  }

  .body {
    width: 600px;
    height: 200px;
    background-color: $backColor;

    border-radius: 0 $r_px 0 $r_px;
  }

  .foot {
    @extend .head;
    transform: rotate(180deg);
  }
}
